<script setup lang="ts">
import { ref, onMounted, unref, nextTick } from 'vue';

interface Position {
  x: number
  y: number
}

interface Size {
  width: number
  height: number
}

interface Style {
  [key: string]: string
}

const container = ref()

class DivElement {
  type: string = 'div';
  text: string = '';
  style: Style = {};
  children: any[] = []
  element: any = null
  on_click_listener: any = null
  constructor(type: string, text: string) {
    this.type = type
    this.text = text
    // TODO:
    this.style.text = text
  }

  flex() {
    this.style.display = 'flex'
    return this
  }

  size_full() {
    this.style.width = '-webkit-fill-available'
    this.style.height = '-webkit-fill-available'
    return this
  }

  justify_center() {
    this.style.justifyContent = 'center'
    return this
  }

  items_center() {
    this.style.alignItems = 'center'
    return this
  }

  center() {
    this.style.display = 'flex'
    this.style.justifyContent = 'center'
    this.style.alignItems = 'center'
    return this
  }

  shadow_lg() {
    this.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
    return this
  }

  text_xl() {
    this.style.fontSize = '1.25rem'
    return this
  }

  text_color(value: string) {
    this.style.color = value
    return this
  }

  p_4() {
    this.style.padding = '1rem'
    return this
  }

  m_4() {
    this.style.margin = '1rem'
    return this
  }

  rounded() {
    this.style.borderRadius = '0.25rem'
    return this
  }

  width(value: number) {
    this.style.width = String(value) + 'px'
    return this
  }
  height(value: number) {
    this.style.height = String(value) + 'px'
    return this
  }

  w(value: number) {
    this.style.width = String(value) + 'px'
    return this
  }
  h(value: number) {
    this.style.height = String(value) + 'px'
    return this
  }

  bg(color: string) {
    this.style.backgroundColor = color
    return this
  }

  // hover(color: string) {
  //   this.style.backgroundColor = '#' + color
  //   return this
  // }

  child(el: DivElement | string) {
    if (isString(el)) {
      this.children.push(div(el as string))
    } else {
      this.children.push(el)
    }

    return this
  }
  // paint() {
  //   const pos = { x: 0, y: 0 }
  //   paint_quad(this, pos, this.style)
  // }

  on_click(listener: any) {

    this.on_click_listener = listener
    return this

  }

  paint(parent: HTMLElement) {
    const divElement: HTMLElement = document.createElement(this.type);
    divElement.style.userSelect = 'none';
    divElement.style.width = this.style.width
    divElement.style.height = this.style.height
    divElement.style.backgroundColor = this.style.backgroundColor
    divElement.style.color = this.style.color
    divElement.style.padding = this.style.padding
    divElement.style.margin = this.style.margin
    divElement.style.display = this.style.display
    divElement.style.justifyContent = this.style.justifyContent
    divElement.style.alignItems = this.style.alignItems
    divElement.style.borderRadius = this.style.borderRadius
    divElement.style.boxShadow = this.style.boxShadow
    divElement.innerText = this.text

    if (this.on_click_listener) {
      divElement.addEventListener('click', this.on_click_listener)
    }

    if (parent) {
      parent.appendChild(divElement)
    } else {
      document.body.appendChild(divElement)
    }

    if (this.children && this.children.length > 0) {
      for (const child of this.children) {
        child.paint(divElement)
      }
    }
  }
}
function div(text: string = '') {
  return new DivElement('div', text)
}

// TOOD:
function input() {
  return new DivElement('input', '')
}

function paint_quad(el: any, pos: Position, style: any) {

  // const divElement = document.createElement('div');

  // el.element = divElement
  // //divElement.style.position = 'absolute';
  // //divElement.style.left = '0px';
  // //divElement.style.top = '0px';

  // divElement.style.userSelect = 'none';
  // divElement.style.width = style.width
  // divElement.style.height = style.height
  // divElement.style.backgroundColor = style.backgroundColor
  // divElement.style.color = style.color
  // divElement.style.padding = style.padding
  // divElement.style.margin = style.margin
  // divElement.style.display = style.display
  // divElement.style.justifyContent = style.justifyContent
  // divElement.style.alignItems = style.alignItems
  // divElement.style.borderRadius = style.borderRadius
  // divElement.style.boxShadow = style.boxShadow

  // divElement.innerText = el.text

  // // 将 div 元素添加到 body 中
  // unref(container).appendChild(divElement);

  // if (el.children.length > 0) {
  //   for (const child of el.children) {
  //     paint_quad(child, pos, child.style)
  //   }
  // }



}

function render(view: any) {
  view.paint(container.value)
}

function rgb(value: number) {
  return '#' + value.toString(16)
}

function isString(value: any) {
  return typeof value === 'string';
}

const button = function (text: string) {
  return div(text)
    .flex()
    .bg('#2e7d32')
    .w(100)
    .h(30)
    //.size(Length::Definite(Pixels(300.0).into()))
    .justify_center()
    .items_center()
    .shadow_lg()
    //.border()
    //.border_color(rgb(0x0000ff))
    .text_xl()
    .text_color('#ffffff')
    .rounded()
    .m_4()
  //.p_4()

}

onMounted(() => {

  // Form({
  //   model: {
  //     name: ''
  //   }
  // }).child(
  //   FormItem().child()
  // )

  // button('按钮').bg('#ff0000').w(200)
  //   .on_click((e) => {
  //     console.log('click', e)
  //   })



  render(
    div().center().bg('#2e7d32')
      .w(300)
      .h(300)
      .child(
        div().center().bg('#ff0000')
          .w(280)
          .h(280)
          .child(
            div().center().bg('#333333')
              .w(260)
              .h(260)
              .text_color('#ffffff')
              .child(
                div().bg('#E47D0F')
                  .w(240)
                  .h(240)
                  .text_color('#ffffff')
                  .child(
                    input()
                  )
                  .child(
                    button('按钮')
                      .on_click((e: MouseEvent) => {
                        console.log(e)
                      })
                  )
              )
          )
      )

  )

})
</script>

<template>
  <div ref="container" style="width: 100vw; height:100vh; display: flex; justify-content: center; align-items: center;">
  </div>

</template>
